<template>
  <div class="gray-page resident-detail-page">
    <nav-bar title="党组织信息采集"></nav-bar>
    <div class="resident-detail-main page-main">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form
          :show-error="false"
          ref="from"
          input-align="right"
          error-message-align="right"
          :label-width="120"
          :readonly="isReadonly"
        >
          <van-collapse v-model="activeNames" :border="false">
            <van-collapse-item size="large" title="党组织信息" name="1">
              <van-field
                required
                readonly
                name="regionCodeName"
                v-model="addfrom.regionCodeName"
                label="所住区域"
                :rules="rules.regionCodeName"
              />
              <van-field
                required
                name="partyOrganName"
                v-model="formParams.partyOrganizationName"
                label="党组织名称"
                placeholder="请输入"
                right-icon="arrow"
                class="van-field__right-icon-white"
                :maxlength="50"
                :rules="rules.partyOrganizationName"
                @blur="queryDetail"
              />
              <van-field
                name="secretary"
                v-model="formParams.secretary"
                label="党组织书记"
                placeholder="请输入"
                right-icon="arrow"
                class="van-field__right-icon-white"
                :maxlength="50"
              />
              <van-field
                required
                name="contacts"
                v-model="formParams.contacts"
                label="党组织联系人"
                placeholder="请输入"
                right-icon="arrow"
                class="van-field__right-icon-white"
                :maxlength="20"
                :rules="rules.contacts"
              />
              <van-field
                required
                name="phone"
                v-model="formParams.phone"
                label="联系方式"
                placeholder="请输入"
                right-icon="arrow"
                class="van-field__right-icon-white"
                :rules="rules.phone"
              />
              <van-field
                required
                readonly
                clickable
                name="partyOrganizationTypeName"
                v-model="formParams.partyOrganizationTypeName"
                label="组织类别"
                placeholder="请选择"
                right-icon="arrow"
                :rules="rules.partyOrganizationTypeName"
                @click="dictOpenPopup('partyOrganizationType')"
              />
              <van-field
                required
                readonly
                clickable
                name="partyCompanySituationName"
                v-model="formParams.partyCompanySituationName"
                label="党组织所在单位情况"
                placeholder="请选择"
                right-icon="arrow"
                :rules="rules.partyCompanySituationName"
                @click="dictOpenPopup('partyCompanySituation')"
              />
            </van-collapse-item>

            <van-collapse
              :border="false"
              v-show="formParams.partyCompanySituation != '1'"
              v-for="(o, key) in unitInfo"
              :model="o"
              :key="key"
            >
              <van-cell title="单位信息">
                <template #right-icon v-if="key > 0 && !isReadonly">
                  <img
                    src="@/assets/images/partyBuilding/partyOrganization_delete@2x.png"
                    @click="delUnit(o, key)"
                    class="delete"
                    alt=""
                  />
                </template>
              </van-cell>
              <van-field
                required
                name="companyName"
                v-model="o.companyName"
                label="单位名称"
                placeholder="请输入"
                right-icon="arrow"
                class="van-field__right-icon-white"
                :maxlength="50"
                :rules="unitRule.companyName"
              />
              <van-field
                required
                name="unifiedCreditCode"
                v-model="o.unifiedCreditCode"
                label="党组织所在单位代码"
                placeholder="请输入"
                right-icon="arrow"
                class="van-field__right-icon-white"
                :maxlength="30"
                :rules="rules.unifiedCreditCode"
              />
              <van-field
                required
                readonly
                clickable
                name="companyTypeName"
                v-model="o.partyCompanyTypeName"
                label="单位类别"
                placeholder="请选择"
                right-icon="arrow"
                :rules="rules.companyType"
                @click="companyTypeOpenPopup('partyCompanyType')"
              />
              <van-field
                required
                clickable
                name="companyCreatOrganizationName"
                v-model="o.companyCreatOrganizationName"
                label="单位建立党组织情况"
                placeholder="请选择"
                right-icon="arrow"
                :rules="rules.companyCreatOrganizationName"
                @click="companyOpenPopup('partyCompanySituation')"
              />
            </van-collapse>
            <!--党组织所在单位情况为 法人单时 只可以新增一条 新增按钮不显示-->
            <van-cell title="" v-if="formParams.partyCompanySituation == '3' && unitInformationNum >= 1 && !isReadonly">
              <template #right-icon>
                <div class="add" @click="handleAdd()">
                  <div>
                    <img src="@/assets/images/partyBuilding/partyOrganization_add@2x.png" alt="" />
                    <span>继续新增单位信息</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-collapse>
          <div style="padding: 16px">
            <template>
              <van-button v-if="!isReadonly" block type="info" @click="onSubmit" :disabled="buttonDisabled">
                提交
              </van-button>
            </template>
          </div>
        </van-form>
      </van-sticky>
    </div>
    <!-- 字典项 -->
    <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
      <van-picker
        show-toolbar
        :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
        :columns="dictData[dictType]"
        value-key="description"
        @cancel="dictPopupShow = false"
        @confirm="dictOnConfirm"
      />
    </van-popup>
    <!-- 单位建立党组织情况-->
    <van-popup v-model="housePopupShow" round position="bottom" @close="dictValue = ''">
      <van-picker
        show-toolbar
        :default-index="organizationData && organizationData.findIndex(o => o.code === dictValue)"
        :columns="organizationData"
        value-key="description"
        @cancel="housePopupShow = false"
        @confirm="houseOnConfirm"
      />
    </van-popup>
    <!-- 单位类别-->
    <van-popup v-model="companyTypePopupShow" round position="bottom" @close="dictValue = ''">
      <van-picker
        show-toolbar
        :default-index="companyTypeData && companyTypeData.findIndex(o => o.code === dictValue)"
        :columns="companyTypeData"
        value-key="description"
        @cancel="companyTypePopupShow = false"
        @confirm="companyTypeOnConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import SelectPopup from '@/mixins/selectPopup'
import Resident from '@/api/resident'
import { toChinesNum } from '@/libs/tool'
import { formParams, addfrom } from './libs/partyOrganzation'
import Public from '@/api/public'
import { phoneReg } from '@/libs/regexp'
export default {
  mixins: [SelectPopup],
  data() {
    const phoneRegValidator = () => {
      return this.formParams.phone && phoneReg.test(this.formParams.phone)
    }
    return {
      toChinesNum,
      title: '采集',
      activeNames: ['1', '2'],
      folder: 'approve/person',
      idCardFolder: 'approve/idCard/img',
      maxSize: 10 * 1024 * 1024,
      idCardFileList: [],
      fileList: [],
      unitInformationNum: 1,
      isReadonly: false,
      unitInfo: [
        {
          companyName: '',
          unifiedCreditCode: '',
          companyType: '',
          partyCompanyTypeName: '',
          companyCreatOrganization: '',
          companyCreatOrganizationName: ''
        }
      ],
      buttonDisabled: false,
      formParams: { ...formParams },
      addfrom: { ...addfrom },
      rules: {
        unitName: [{ required: true, message: '请选择党组织所在情况' }],
        phone: [{ validator: phoneRegValidator, message: '请输入正确的手机号' }]
      },
      unitRule: {
        companyName: [{ required: true, message: '请填写单位名称', trigger: 'blur' }],
        unifiedCreditCode: [{ required: true, message: '请填写党组织所在单位代码', trigger: 'blur' }],
        companyType: [{ required: true, message: '请选择单位类别', trigger: 'change' }],
        companyCreatOrganization: [{ required: true, message: '请选择单位建立党组织情况', trigger: 'change' }]
      },
      /* 单位建立党组织情况 */
      organizationData: [],
      houseType: '',
      housePopupShow: false,
      /* 单位类别 */
      companyTypePopupShow: false,
      companyTypeData: [],
      companyType: '',
      dictTypes:
        'partyCompanyType,companyType,partyOrganizationType,partyCompanySituation,residentType,registerType,marriage,politic,edulevel,religion,professionType,,identification,cardType,residenceType,citizenship,purpose'
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  watch: {},
  created() {
    // 字典项
    this.getDict(this.dictTypes)
    this.getCitytodis()
    // 查看
    if (this.$route.query.partyOrganizationCode) {
      this.title = '查看'
      this.getDetail()
      this.isReadonly = true
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      Resident.BaseInfo.partyOrgDetail({
        partyOrganizationCode: this.$route.query.partyOrganizationCode
      }).then(res => {
        if (res.data.status === 0) {
          const detailData = res.data.data
          console.log(detailData)
          this.formParams = detailData
          this.unitInfo = detailData.partyCompty
          this.addfrom.regionCodeName = detailData.regionAddress
          this.addfrom.partyOrganizationTypeName = detailData.partyOrganizationTypeName
          this.formParams.partyCompanySituationName = detailData.companySituationName
        }
      })
    },
    handleAdd() {
      this.unitInformationNum++
      this.unitInfo.push({
        companyName: '',
        unifiedCreditCode: '',
        companyType: '',
        companyCreatOrganization: ''
      })
    },
    delUnit(o, i) {
      this.unitInformationNum--
      this.unitInfo.splice(i, 1)
    },
    companyOpenPopup(houseType) {
      if (!this.organizationData.length) {
        this.$toast('暂无数据')
        return false
      }
      this.houseType = houseType
      this.housePopupShow = true
    },
    companyTypeOpenPopup(houseType) {
      if (!this.companyTypeData.length) {
        this.$toast('暂无数据')
        return false
      }
      this.companyType = houseType
      this.companyTypePopupShow = true
    },
    houseOnConfirm(item) {
      this.unitInfo[this.unitInformationNum - 1].companyCreatOrganization = item.code
      this.unitInfo[this.unitInformationNum - 1].companyCreatOrganizationName = item.description
      this.housePopupShow = false
    },
    companyTypeOnConfirm(item) {
      this.unitInfo[this.unitInformationNum - 1].companyType = item.code
      this.unitInfo[this.unitInformationNum - 1].partyCompanyTypeName = item.description
      this.companyTypePopupShow = false
    },
    // 单位建立党组织情况
    getCitytodis() {
      this.addfrom.regionCodeName = this.user.regionCodeName
      this.formParams.regionCode = this.user.regionCode
      console.log(this.user)
      const type = 'partyCompanySituation,partyCompanyType'
      Public.Init.init({ type }).then(res => {
        const { data } = res.data
        this.organizationData = data.partyCompanySituation
        this.companyTypeData = data.partyCompanyType
        console.log(this.companyTypeData)
      })
    },
    // 校验党组织名称
    queryDetail() {
      Resident.Init.partyOrganizationCheck({
        partyOrganizationName: this.formParams.partyOrganizationName,
        partyOrganizationCode: ''
      }).then(res => {
        if (res.data.status !== 0) {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 表单 - 提交
    onSubmit() {
      this.buttonDisabled = true
      this.formParams.companySituation = this.formParams.partyCompanySituation
      const paramsData = {
        basePartyOrganization: this.formParams,
        basePartyOrganizationCompany: this.unitInfo
      }
      Resident.BaseInfo.partyOrganizationSave(paramsData)
        .then(res => {
          const { status } = res.data
          if (status === 0) {
            this.$router.push({
              path: '/page/message',
              query: {
                backTo: this.$route.query.type ? '-2' : '-1',
                title: this.$route.query.type ? `${this.title}成功` : '提交成功'
              }
            })
          } else {
            this.$toast.fail(res.data.message)
          }
          this.buttonDisabled = false
        })
        .catch(() => {
          this.buttonDisabled = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/resident/detail.less';
.add {
  width: 100%;
  height: 50px;
  background: #fff;
  text-align: center;
  padding: 10px 16px;
  line-height: 50px;
}
.add div {
  border: 1px dashed rgba(0, 0, 0, 0.34);
}
.add img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}
.add span {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.54);
  line-height: 14px;
  font-size: 12px;
}
.delete {
  width: 30px;
  height: 32px;
}
</style>
